<template>
	<view class="page-container safe-area">
		<!-- 顶部个人信息区 -->
		<view class="gradient-bg">
			<!-- 装饰元素 -->


			<view class="header-content">
				<view class="flex justify-between items-center mb-30 pt-32">
					<text class="text-xl font-bold text-white">个人中心</text>
				</view>

				<view class="flex items-center mb-32">
					<view class="avatar" @click="tousermsg"
						:style="{ backgroundImage: 'url(' + (user.avatar_url || 'https://img0.baidu.com/it/u=105216936,2956740654&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500') + ')' }">

					</view>
					<view class="ml-16 flex-1">
						<text class="text-gray-200 text-sm">{{user.name || ''}} 
							</text>
						<!-- <view class="flex mt-8">
							<view class="tag">{{user.avatar_url || ''}}</view>
							<view class="tag ml-8">{{user.avatar_url || ''}}</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>



		<!-- 功能菜单 -->
		<view class="menu-container">


			<view class="menu-item" @click="gozs">
				<view class="menu-icon bg-gray-100">

					<van-icon size="36" color="#F8961E" name="star-o" />

				</view>
				<text class="font-medium">我的证书</text>
				<view class="menu-right">
					<text class="text-gray-400 text-sm mr-8">查看证书</text>
				</view>
			</view>
			<view class="menu-item" @click="showLogoutConfirm">
				<view class="menu-icon bg-gray-100">
					<van-icon name="setting-o" size="36" color="#3B82F6" />
				</view>
				<text class="font-medium">退出登录</text>
				<view class="menu-right">
					<text class="text-gray-400 text-sm mr-8">退出账号</text>
				</view>
			</view>
		</view>
		<view class="tab-bar">
			<view class="tab-item" :class="{active: currentTab === 0}" @click="switchTab(0)">
				<van-icon name="home-o" size="20px" :color="currentTab === 0 ? '#4361ee' : '#6c757d'" />
				<text>首页</text>
			</view>
			<view class="tab-item" :class="{active: currentTab === 1}" @click="switchTab(1)">
				<van-icon name="user-o" size="20px" color="currentTab === 1 ? '#4361ee' : '#6c757d'" />
				<text>我的</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getInformation,
	} from "../../utils/getDate.js";
	export default {
		data() {
			return {
				currentPage: 'my',
				user: uni.getStorageSync("userinfo") || {},
				approval_status: null,
				manyi: "",
				projectSize: "",
				teacherScore: "",

				currentTab: 1 // 当前选中的tab
			}
		},
		onShow() {
			this.ongetInformation()
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
				if (index === 0) {
					uni.redirectTo({
						url: '/pages/student/studentIndex' // 替换为你的"我的"页面路径
					});
				}
			},
			showLogoutConfirm() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					confirmText: '确定',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							that.clear();
						}
					}
				});

			},

			clear() {
				uni.clearStorage()
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},


			ongetInformation() {
				let data = {
					id: uni.getStorageSync("userinfo").id
				}
				getInformation(data).then(res => {
					this.user = res.user || {};
					uni.setStorageSync("userinfo", res.user)
				})
			},

			tousermsg() {
				uni.navigateTo({
					url: '/pages/student/studentusermsg'
				});
			},
			gozs() {
				uni.navigateTo({
					url: '/pages/student/myzs'
				});
			},


		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		background-color: #f5f7fa;
		min-height: 100vh;
		overflow-x: hidden;
	}

	/* 顶部个人信息区 */
	.gradient-bg {
		background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
		border-bottom-left-radius: 48rpx;
		border-bottom-right-radius: 48rpx;
		padding-bottom: 128rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.header-content {
		padding: 0 48rpx;
		box-sizing: border-box;

		position: relative;
		z-index: 1;
	}

	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.decoration-circle.top-right {
		width: 256rpx;
		height: 256rpx;
		top: 0;
		right: 0;
		transform: translate(128rpx, -128rpx);
	}

	.decoration-circle.bottom-left {
		width: 320rpx;
		height: 320rpx;
		bottom: 0;
		left: 0;
		transform: translate(-160rpx, 160rpx);
		background-color: rgba(255, 255, 255, 0.05);
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		background-color: #e5e7eb;
		position: relative;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.badge {
		position: absolute;
		bottom: 0;
		left: -10rpx;
		background-color: #F59E0B;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		transform: translate(10rpx, 10rpx);
		width: 160rpx;
		text-align: center;
	}

	.official-badge {
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.tag {
		background-color: rgba(255, 255, 255, 0.1);
		color: white;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
	}

	/* 数据统计卡片 */
	.stats-card {
		background-color: white;
		border-radius: 32rpx;
		padding: 48rpx;
		box-sizing: border-box;
		margin: -96rpx 48rpx 48rpx;
		box-shadow: 0 20rpx 50rpx -10rpx rgba(0, 0, 0, 0.1), 0 20rpx 20rpx -10rpx rgba(0, 0, 0, 0.04);
	}

	.stat-icon {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 16rpx;
	}

	/* 功能菜单 */
	.menu-container {
		background-color: white;
		border-radius: 32rpx;
		overflow: hidden;
		margin: 0 48rpx 48rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
		z-index: 999;
		position: relative;
		top: -100rpx;
	}

	.menu-item {
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f3f4f6;
		transition: all 0.2s;
	}

	.menu-item:active {
		background-color: #f9fafb;
	}

	.menu-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
	}

	.icon-img {
		width: 40rpx;
		height: 40rpx;
	}

	.menu-right {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	/* 工具类样式 */
	.flex {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	.items-center {
		align-items: center;
	}

	.mb-30 {
		margin-bottom: 60rpx;
	}

	.mb-32 {
		margin-bottom: 64rpx;
	}

	.ml-8 {
		margin-left: 16rpx;
	}

	.ml-16 {
		margin-left: 32rpx;
	}

	.mr-8 {
		margin-right: 16rpx;
	}

	.mt-8 {
		margin-top: 16rpx;
	}

	.pt-32 {
		padding-top: 64rpx;
		box-sizing: border-box;
	}

	.flex-1 {
		flex: 1;
	}

	.text-xl {
		font-size: 40rpx;
	}

	.text-2xl {
		font-size: 48rpx;
	}

	.text-xs {
		font-size: 24rpx;
	}

	.text-sm {
		font-size: 28rpx;
	}

	.font-bold {
		font-weight: bold;
	}

	.font-medium {
		font-weight: 500;
	}

	.text-white {
		color: white;
	}

	.text-gray-200 {
		color: #e5e7eb;
		font-size: 38rpx;
	}

	.text-gray-400 {
		color: #9CA3AF;
	}

	.text-gray-500 {
		color: #6B7280;
	}

	.text-blue-500 {
		color: #3B82F6;
	}

	.text-green-500 {
		color: #10B981;
	}

	.text-purple-500 {
		color: #8B5CF6;
	}

	.bg-blue-100 {
		background-color: #DBEAFE;
	}

	.bg-green-100 {
		background-color: #D1FAE5;
	}

	.bg-purple-100 {
		background-color: #EDE9FE;
	}

	.bg-orange-100 {
		background-color: #FFEDD5;
	}

	.bg-gray-100 {
		background-color: #F3F4F6;
	}

	.grid {
		display: grid;
	}

	.grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.gap-16 {
		gap: 32rpx;
	}

	.text-center {
		text-align: center;
	}

	.p-8 {
		padding: 16rpx;
		box-sizing: border-box;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 8px 0;
		font-size: 0.9rem;
		color: #6c757d;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-item.active {
		color: #4361ee;
		font-weight: 500;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.grid-container {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (max-width: 500px) {
		.header-title {
			font-size: 1.2rem;
		}

		.grid-container {
			grid-template-columns: repeat(2, 1fr);
		}

		.quick-action .van-icon {
			width: 28px;
			height: 28px;
		}

		.quick-action text {
			font-size: 0.7rem;
		}
	}
</style>